<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="common/head :: htmlhead">
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">网点列表</div>
                <div class="layui-card-body">
                    <div class="test-table-reload-btn" style="margin-bottom: 10px;margin-top: 10px;">
                        <div class="layui-inline">
                            <label class="layui-form-label" style="padding-right: 8px; padding-left:0; width: 60px">网点编号</label>
                            <input class="layui-input" name="orgCode" id="orgCode" placeholder="网点编号"
                                   autocomplete="off">
                        </div>
                        <div class="layui-inline" style="margin-left:40px">
                            <label class="layui-form-label" style="padding-right: 8px; padding-left:0; width: 30px">省份</label>
                            <input class="layui-input" name="orgCode" id="shengfen" placeholder="所在省份"
                                   autocomplete="off">
                        </div>
                        <div class="layui-inline" style="margin-left:40px">
                            <label class="layui-form-label" style="padding-right: 8px; padding-left:0; width: 30px">月份</label>
                            <input type="text" name="yuefen" placeholder="选择月份"
                                   autocomplete="off" class="layui-input" id="yuefen">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="test-table-reload-btn" style="margin-bottom: 10px;">
                        <button class="layui-btn" style="margin-left:10px;" data-type="reload">搜索</button>
                        <button class="layui-btn" style="margin-left:20px;" data-type="export">导出</button>
                    </div>
                    <table id="info_table_collected" lay-filter="info_table_collected"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="table_operate">
    <a style="color: #1D54C2" lay-event="xiangqing">详情</a>
    <a style="color: #d71515; margin-left: 20px" lay-event="discollect">取消</a>
</script>

<script>
    layui.use(['table', 'element', 'laydate', 'layer'], function () {
        var table = layui.table, element = layui.element;
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#yuefen' //指定元素
            ,type: 'month'
        });

        table.render({
            elem: '#info_table_collected',
            url: '/orgListCollected',
            method: 'post',
            toolbar: false,
            skin: 'line',
            // ,defaultToolbar: ['filter', 'print']
            cellMinWidth: 80,
            page: true,
            cols: [
                [
                    // {type: 'checkbox', fixed: 'left'},
                    {field: 'orgCode', title: '网点编号', width:95, align: "center"},
                    {field: 'yuefen', title: '月份', width:90, sort: true, align: "center"},
                    {field: 'shengfen', title: '省份', width:90, align: "center"},
                    {field: 'shangquanf', title: '静态效率评分', width:130, sort: true, align: "center"},
                    {field: 'type', title: '当前规模', width:110, align: "center"},
                    {field: 'rank', title: '评级', width:80, templet:'#rankColor', align: "center"},
                    {field: 'rank3', title: '同规模评级', width:120, templet:'#rankColor2', align: "center"},
                    {field: 'incCoef', title: '趋势激励系数', width:120, align: "center"},
                    {field: 'dynamicEff', title: '动态效率评分', width:130, sort: true, align: "center"},
                    {field: 'averageAge', title: '派送时效', width:110, sort: true, align: "center"},
                    {field: 'avgDeliveryCountRate', title: '当日派件率', width:120, sort: true, align: "center"},
                    {field: 'laborProductivity', title: '劳动生产率', width:120, sort: true, align: "center"},
                    {field: 'dailyMaxWaybillCount', title: '最大派送能力', width:140, sort: true, align: "center"},
                    {field: 'deliveryRate', title: '人员利用率', width:120, sort: true, align: "center"},
                    {field: 'workload', title: '工作负荷', width:110, sort: true, align: "center"},
                    {field: 'tool_field', fixed: 'right', title: '操作', align: "center", toolbar: '#table_operate', width: '12%'},
                ]
            ]
        });

        // 搜索
        var $ = layui.$, active = {
            reload: function () {
                var orgCode = $('#orgCode');
                var shengfen = $('#shengfen');
                var yuefen = $('#yuefen');

                //执行重载
                table.reload('info_table_collected', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        // 变量名要和数据库一致
                        org_code: orgCode.val(),
                        shengfen: shengfen.val(),
                        yuefen: yuefen.val(),
                    }
                });
            },
            export: function () {
                table.exportFile("info_table_collected", null, 'xls');
            },
        };

        $('.test-table-reload-btn .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        table.on('tool(info_table_collected)', function (obj) {
            var data = obj.data;
            if (obj.event === 'xiangqing') {
                var url = '/evaluate?type=zonghe&orgCode=' + data.orgCode + '&yuefen=' + data.yuefen;
                parent.layui.index.openTabsPage(url, "网点综合评价");
            }
            else if (obj.event==='discollect'){
                layer.msg('取消收藏成功');
                table.reload('info_table_collected', {
                    where: {
                        orgCode: data.orgCode
                    }
                });
            }
        });

        table.on('sort(info_table_collected)', function (obj) {
            table.reload('info_table_collected', {
                initSort: obj //记录初始排序
                , where: {
                    field: obj.field //排序字段
                    , order: obj.type //排序方式
                }
            });

        });

    });

</script>

<script type="text/html" id="rankColor">
    {{#  if(d.rank == 'A'){ }}
    <span style="color: #07ff00;">{{ d.rank }}</span>
    {{#  }else if(d.rank == 'B'){ }}
    <span style="color: #ffcf25;">{{ d.rank }}</span>
    {{#  }else if(d.rank == 'C'){ }}
    <span style="color: #ff0000;">{{ d.rank }}</span>
    {{#  }else{ }}
    <span style="color: #0041ff;">{{ d.rank }}</span>

    {{#  } }}
</script>

<script type="text/html" id="rankColor2">
    {{#  if(d.rank3 == 'A'){ }}
    <span style="color: #07ff00;">{{ d.rank3 }}</span>
    {{#  }else if(d.rank3 == 'B'){ }}
    <span style="color: #ffcf25;">{{ d.rank3 }}</span>
    {{#  }else if(d.rank3 == 'C'){ }}
    <span style="color: #ff0000;">{{ d.rank3 }}</span>
    {{#  }else{ }}
    <span style="color: #0041ff;">{{ d.rank3 }}</span>
    {{#  } }}
</script>

</body>
<style>
    .layui-table-cell{
        height:54px;
        line-height: 30px;
        padding-top: 12px;
    }
</style>
</html>